import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex } from 'antd';

const LoginForm: React.FC = () => {
  const defultValues = {
    username: 'admin',
    password: '123456',
    remember: true,
  }
  const [token, setToken] = useLocalStorageState('user-login-token', {
    defaultValue: '',
    listenStorageChange: true,
  });
  const navigate = useNavigate();
  
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
    setToken('7777');
    navigate('/');
  };

  const clickLogin = () => {
    console.log('clickLogin');
  }

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <Form
        name="login"
        initialValues={defultValues}
        style={{ maxWidth: 360 }}
        onFinish={onFinish}
      >
        <Form.Item        
          name="username"
          rules={[{ required: true, message: '请输入用户名!' }]}
        >
          <Input prefix={<UserOutlined />} placeholder="用户名" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入密码!' }]}
        >
          <Input.Password prefix={<LockOutlined />} type="password" placeholder="密码" />
        </Form.Item>
        <Form.Item>
          <Flex justify="space-between" align="center">
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>
            <a href="">忘记密码</a>
          </Flex>
        </Form.Item>

        <Form.Item>
          <Button block type="primary" htmlType="submit" onClick={clickLogin}>
            登录
          </Button>
          或 <a href="">现在注册!</a>
        </Form.Item>
      </Form>
    </div>
  );
};

export default LoginForm;